<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <script>
      // 防抖：前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次
      //    实现的原理在于：我们想要清除setTimeout 我们应该存储这个timer变量
      //      timer需要一直保存在内存中，闭包 内存的泄漏
      var input = document.getElementById("input");
      function debounce(delay,fn,immediate) {
        let timer;
        let doDebounce = function () {
          // 关闭的是上一 次的timer，只要在delay时间内一直输出，就会一直清除上一次定时器
          // 这就是为什么使用闭包的原因，为了使timer可以被存储
          let arg = arguments //arguments 
          // 注意 clearTimeout清理定时器，timer不会为null，还是原来的值，只是关闭了定时器而已
          if(timer) clearTimeout(timer);
          // console.log(timer);
          // if(immediate){
          //  let flag = !timer
          //  timer = setTimeout(()=>{
          //   timer = null
          //  },delay)
          //  if(flag) fn.apply(this,arg)
          // }else{
            timer = setTimeout(() => {
              fn.apply(this,arg) //解决this指向问题 和函数中e的事件
          }, delay);
          // }
        };
        doDebounce.cancle = function(){
          clearTimeout(timer)
          tiemr = null
        }
        return doDebounce
      }
      function fn(e){
        // console.log(this);//要解决this指向问题 如果不处理的话会指向window
        console.log(this) //这里this的指向就是看谁调用了debounce函数
        console.log(e.target.value);
      }
        // input.addEventListener("keyup", function(e) {
        //   // debounce(1000, e.target.value);
        //   debounce(500,fn)
        // });
        let doDebounce = debounce(500,fn)
      input.onkeyup = doDebounce
    </script>
  </body>
</html>
